<template>
    <Breadcrumb :datas="[`管理系统`, `壁纸管理`, `壁纸图集`]">
        <el-button type="primary" plain
            ><el-icon><Plus /></el-icon>新增图集</el-button
        >
    </Breadcrumb>
    <el-table :data="pictures" style="width: 100%" empty-text="没有数据">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="封面" prop="cover">
            <template #default="scope">
                <el-image
                    style="width: 100px"
                    :src="scope.row.cover"
                    fit="cover"
                ></el-image>
            </template>
        </el-table-column>
        <el-table-column label="所在图库">
            <template #default="scope">
                <el-tag>{{ scope.row.collection.name }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input placeholder="请输入搜索关键词" size="large">
                    <template #prepend>
                        <el-select
                            placeholder="请选择搜索条件"
                            style="width: 130px"
                            size="large"
                        >
                            <el-option label="图库名称" value="1" />
                            <el-option label="图集名称" value="2" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button size="large">搜索</el-button>
                    </template>
                </el-input>
            </template>
            <template #default="scope">
                <DeleteConfirm :confirm="() => deleteEvent(scope.row._id)" />
            </template>
        </el-table-column>
    </el-table>
    <el-divider />
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
</template>

<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import Breadcrumb from "@/components/breadcrumb";
import DeleteConfirm from "@/components/confirm";

const pictures = ref([
    {
        _id: "1",
        name: "穿靴子的猫",
        cover: "https://picsum.photos/200/300",
        collection: {
            _id: "1",
            name: "可爱猫咪",
        },
        list: [
            {
                _id: "1",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "2",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "3",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "4",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "5",
                url: "https://picsum.photos/900/1600",
            },
        ],
    },
    {
        _id: "1",
        name: "捣蛋二哈",
        cover: "https://picsum.photos/200/300",
        collection: {
            _id: "1",
            name: "可爱猫咪",
        },
        list: [
            {
                _id: "1",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "2",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "3",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "4",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "5",
                url: "https://picsum.photos/900/1600",
            },
        ],
    },
    {
        _id: "1",
        name: "天龙八部王语嫣",
        cover: "https://picsum.photos/200/300",
        collection: {
            _id: "1",
            name: "江湖影视",
        },
        list: [
            {
                _id: "1",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "2",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "3",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "4",
                url: "https://picsum.photos/900/1600",
            },
            {
                _id: "5",
                url: "https://picsum.photos/900/1600",
            },
        ],
    },
]);

// 删除事件
const deleteEvent = (id) => {
    console.log(id);
};
</script>

<style lang="scss" scoped></style>
